<template>
  <div class="body">
    <div class="select-subject">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="state.selectedSubjectId" class="ml-4" @change="onChangesubject">
          <el-radio-button label="信息" size="small" value="信息" />
          <el-radio-button label="通用" size="small" value="通用" />
          <el-radio-button label="职高" size="small" value="职高" />
        </el-radio-group>
      </div>
    </div>  
    <div  class="menu">      
        <el-menu  class="el-menu-vertical-demo" background-color="#ffffff">
            <template v-for="courseitem in state.chapterSectionMenu" :key="courseitem.id">
                <el-sub-menu v-if="courseitem.children.length > 0" :key="courseitem.id" :index="courseitem.id.toString()">
                    <template #title>
                      <router-link :to="{ path:'/getQuestionsByCourse', query: {id: courseitem.id}}">{{ courseitem.name}}</router-link>
                    </template> 
                    <template v-for="knowledgepointitem in courseitem.children" :key="knowledgepointitem.id">
                        <el-menu-item @click="SelectKnowledge(knowledgepointitem.id)" :index="knowledgepointitem.id.toString()">
                          {{ knowledgepointitem.name }}                                        
                        </el-menu-item>
                    </template>
                </el-sub-menu>
            </template>          
        </el-menu>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from 'vue'
import axios from '@/utils/axios'
import { useRoute, useRouter } from 'vue-router'
const subjecnt_value_dic = {信息:'1', 通用: '2', 职高:'3'}
const emit=defineEmits(['submit'])
// 学科改变了,重新根据选中的学科获取章节目录
const onChangesubject = (value)=>{
  console.log('subject change:', value)
  state.selectedSubjectId = subjecnt_value_dic[value]
  console.log('学科id',state.selectedSubjectId)
  getCategoryData()
}
const state = reactive({
  chapterSectionMenu:[],
  subjectList:[],
  selectedSubjectId: '1',
})
const handleSubmitButton=()=>{
//通知组件上的自定义submit事件执行
emit('submit')
}

const router = useRouter()
const props = defineProps({
    menu_list: Array,
});
const SelectKnowledge = (id)=> {
  router.push({path:'/getQuestionsByKnowledgepoint', query:{ id: id}})
}
// 获取某学科下的知识点目录
const getCategoryData=()=>{
  let params = {
    subject_id: state.selectedSubjectId,
  }
  axios.get('/knowledgepoints/get_knowledge_all_subject_and_course_for_compose',{ params}).then(res => {
    console.log('获取所有章节知识点：', res)
      if (res.code==200){
          state.chapterSectionMenu = res.data.results  
      }else{       
          console.log("error", res.message)
      }
  })
  .catch((error)=>{
      console.log("获取章节菜单错误：", error)
  })
}
// 获取所有学科，并设置默认选中第一个学科
const getSubjectData = ()=>{
  axios.get('/SubjectViewSet').then(res => {
      console.log('获取学科：', res)
        if (res.code==200){
            state.subjectList = res.data.results
            state.selectedSubjectId = state.subjectList[0].id
        }else{       
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("获取章节菜单错误：", error)
    })
}
onMounted(()=>{
  getSubjectData()
  getCategoryData()
})
</script>

<style scoped>
    .menu{
        display: flex;
        flex-flow: column nowrap;
        width: 200px;
        overflow: hidden;
        background-color: #fcf2e6;
    }
    span{
        font-size: 10x;
        color: #000;
    }
    a{
        text-decoration: none;
        color:#333;
        font-family:sans-serif;
        font-size: 12px;
    }
</style>